<template>
    <el-form ref="ruleFormRef" :model="FromData" :rules="rules" class="container">
        <div>
            <span>昵称：</span>
            <el-form-item prop="nickname" class="nickname">
                <el-input v-model="FromData.nickname" type="text" placeholder="你的昵称" />
            </el-form-item>
        </div>
        <div style="margin-bottom: 20px;">
            <span>用户名：</span>
            <span>{{ FromData.username }}</span>
        </div>
        <div>
            <span>我的签名：</span>
            <el-form-item prop="signature" class="signature">
                <el-input v-model="FromData.signature" rows="5" type="textarea" placeholder="请设置你的签名( つ•̀ω•́)"
                    resize="none" />
            </el-form-item>
        </div>
        <div>
            <span>性别：</span>
            <el-radio-group v-model="FromData.gender" size="large">
                <el-radio-button label="男" />
                <el-radio-button label="女" />
            </el-radio-group>
        </div>
    </el-form>
    <div class="main">
        <div class="dividerLine"></div>
        <el-button type="primary" class="save" @click="submit(ruleFormRef)">保存</el-button>
    </div>
</template>

<script setup lang="ts">
import { FormRules, FormInstance, ElMessage } from 'element-plus';
import { useUserStore } from '@/store'
import axios from 'axios';
const User = useUserStore()
const ruleFormRef = ref<FormInstance>()
let FromData = reactive(toRaw(User.$state.user))
const submit = (formEl: FormInstance | undefined) => {
    formEl?.validate((valid: boolean) => {
        if (valid) {
            axios.patch('/user', {
                username: FromData.username,
                nickname: FromData.nickname,
                signature: FromData.signature,
                gender: FromData.gender,
            }).then(({ data }) => {
                ElMessage({
                    message: data.msg,
                    type: data.code == '0000' ? 'success' : 'error',
                })
                User.setUser(data.data)
            }, (err) => {
                throw err
            })
        } else {
            ElMessage({
                message: '验证失败!',
                type: 'error',
            })
            return false
        }

    })
}
const validatorName = (rule: any, value: string, callback: any) => {
    if (value.trim().includes(' ')) {
        return callback('昵称内部不能包含空格')
    }
    return true
}
const rules = reactive<FormRules>({
    nickname: [{ min: 3, max: 15, message: '昵称长度为3-15位', trigger: 'blur' },
    { validator: validatorName, trigger: 'blur' }],
    signature: [{ max: 200, message: '签名最大长度200个字符', trigger: 'blur' }],
})
</script>


<style scoped lang="less">
.container {
    width: 100%;
    margin: 20px 10px;
    font-size: 14px;
    color: rgb(96, 98, 102);

    &>div {
        display: flex;

        &>span:first-child {
            display: inline-block;
            margin-right: 15px;
            width: 80px;
            text-align: right;
        }
    }

    .nickname {
        width: 260px;
    }

    .signature {
        width: 500px;
    }

}

.main {
    display: flex;
    flex-direction: column;
    align-items: center;

    .dividerLine {
        width: 95%;
        height: 1px;
        border-bottom: 1px solid #eee;
        margin: 30px 0;
    }

    .save {
        width: 120px;
        height: 45px;
    }
}
</style>